<template>
    <!--考勤-->
    <div>
        <div class="options-wrapper">
            <div class="search">
                <DatePicker type="date"
                            placeholder="日期选择"
                            style="width: 200px"
                            :value="day"
                            @on-change="dayChange"
                />
                <div>
                    <Select v-model="time" placeholder="上课时间选择">
                        <Option v-for="item in timeList" :value="item" :key="item">{{item}}</Option>
                    </Select>
                </div>
                <div>
                    <Select v-model="teachingId" @on-change="search" placeholder="课程选择">
                        <Option v-for="item in teachingList" :value="item.id" :key="item.id">
                            {{item.teacher}} {{item.feather}} {{item.room}}
                        </Option>
                    </Select>
                </div>
            </div>
            <div class="right-option">
                <Button v-if="selectIds.length==0" disabled>批量审核</Button>
                <Button v-else type="error" @click="verifyBatch">批量审核</Button>
                <!--后续做-->
                <Button type="success" @click="verifyByDay">全天审核</Button>
            </div>
        </div>
        <!--角色编辑-->
        <Table border :columns="columns" :data="recordList" @on-selection-change="changeSelect">
            <template slot-scope="{row}" slot="status">
                <span v-if="row.status==0" style="color: green">{{statusList[row.status]}}</span>
                <span v-else style="color: blue">{{statusList[row.status]}}</span>
            </template>
            <template slot-scope="{row}" slot="type">
                <span>{{type[row.type]}}</span>
            </template>
            <template slot-scope="{row}" slot="action">
                <div v-if="row.type==null || row.type==0">
                    <Button type="primary" size="small" style="margin-right: 15px" @click="present(row)">考勤</Button>
                    <Button type="error" size="small" style="margin-right: 15px" @click="absent(row)">缺席</Button>
                </div>
                <div v-else>
                    <Button type="success" size="small" style="margin-right: 15px" @click="verify(row)"
                            v-if="row.status==0">审核
                    </Button>
                    <Button type="warning" size="small" style="margin-right: 15px">重置</Button>
                </div>
            </template>
        </Table>
        <Page :total="total"
              :current="current"
              @on-change="change"
              class="page"/>
        <Modal
                v-model="modal"
                title="考勤"
                :closable="false"
                :mask-closable="false">
            <Form ref="formValidate"
                  :model="record"
                  :rules="ruleValidate"
                  :label-width="80"
                  inline>
                <FormItem label="考勤时长" prop="presentHour">
                    <Input v-model="record.presentHour" type="number" placeholder="时长"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="cancel">取消</Button>
                <Button type="primary" size="large" @click="submit('formValidate')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {today} from "../../request/utils"

    export default {
        name: "Teacher",
        created() {
            this.getList();
            this.getTimeList();
        },
        data() {
            return {
                modal: false,
                total: 10,
                selectIds: [],
                current: 1,
                param: '',
                timeList: [],
                teachingId: '',
                teachingList: [],
                day: today,  //日期
                time: "",     //上课时间段
                recordList: [],
                record: {
                    presentHour: ''
                },
                statusList: {
                    0: '等待审核',
                    1: '已审核'
                },
                type: {
                    1: '考勤',
                    2: '缺席'
                },
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '学生',
                        key: 'studentName'
                    }, {
                        title: '考勤情况',
                        slot: 'type'
                    }, {
                        title: '备注',
                        key: 'remark'
                    }, {
                        title: '状态',
                        slot: 'status'
                    }, {
                        title: '操作',
                        slot: 'action',
                        width: 250,
                        align: 'right'
                    }
                ],
                ruleValidate: {
                    presentHour: [
                        {required: true, type: 'number', message: '时长不能为空', trigger: 'blur'}
                    ],
                }
            }
        },
        watch: {
            day: function () {
                this.getTimeList()
            },
            time(value) {
                let arr = value.split('—');
                let start = new Date('2020-04-02 ' + arr[0]).getTime()
                let end = new Date('2020-04-02 ' + arr[1]).getTime()
                let hour = (end - start) / (60 * 60 * 1000)
                this.record.presentHour = hour
                this.getTeachingList()
            },
            teachingId: function () {
                this.getList()
            }
        },
        methods: {
            changeSelect(e) {
                this.selectIds = [];
                e.forEach(
                    item => this.selectIds.push(item.id)
                );
            },
            getList() {
                if (this.teachingId != '') {
                    this.$api.recordByTeachingId(this.teachingId).then(res => {
                        console.log("recordList", res)
                        this.recordList = res;
                    })
                }
            },
            //根据日期获取上课时间
            getTimeList() {
                this.$api.teachingTimeList(this.day).then(res => {
                    this.timeList = [];
                    if (res.length > 0) {
                        res.forEach(e => {
                            e = e.replace(",", "—")
                            this.timeList.push(e);
                        })
                    }
                    this.time = this.timeList[0];
                })
            },
            //获取teachingList（根据日期，时间段）
            getTeachingList() {
                this.$api.teachingSearch({
                    day: this.day,
                    time: this.time.replace("—", ",")
                }).then(res => {
                    this.teachingList = res
                    this.teachingId = this.teachingList[0].id;
                })
            },
            dayChange(date) {
                this.day = date;
            },
            search() {
                this.current;
                this.getList();
            },
            change(num) {
                this.current = num;
                this.getList();
            },
            remove(row) {
                this.$Modal.confirm({
                    title: '确认删除:' + row.name + " 吗？",
                    onOk: () => {
                        this.$api.userDelete({id: row.id})
                            .then(() => {
                                this.$Message.success('删除成功')
                                this.getList();
                            })
                    }
                })
            },
            //缺席
            absent(item) {
                let remark = '';
                this.$Modal.confirm({
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: remark,
                                autofocus: true,
                                placeholder: '输入缺勤原因'
                            },
                            on: {
                                input: (val) => {
                                    remark = val;
                                }
                            }
                        })
                    },
                    onOk: () => {
                        console.log("mark", remark);
                        let record = item
                        record.remark = remark
                        record.presentHour = 0
                        record.type = 2
                        this.saveRecord(record)
                        this.getList();
                    }
                })
            },
            //考勤
            present(item) {
                this.modal = true;
                this.record.curriculaId = item.curriculaId;
                this.record.teachingId = item.teachingId;
                this.record.type = 1
            },
            saveRecord(record) {
                this.$api.recordSave(record).then(() => {
                    this.modal = false
                    this.getList();
                })
            },
            //关闭编辑框
            cancel() {
                this.modal = false;
            },
            course(row) {
                this.$router.push({path: 'course', query: row})
            },
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.saveRecord(this.record)
                    }
                })
            },
            //审核
            verify(item) {
                this.$api.recordVerify({
                    id: item.id
                }).then(() => {
                    this.getList();
                })
            },
            //批量考核
            verifyBatch() {
                this.$api.recordVerifyBatch(this.selectIds).then(() => {
                    this.getList();
                })
            },
            //按天审核
            verifyByDay() {
                this.$Modal.confirm({
                    title: "确认对：" + this.day + "进行批量审核吗？",
                    onOk: () => {
                        this.$api.recordVerifyByDay({day: this.day}).then(() => {
                            this.getList();
                        })
                    }
                })

            }
        }
    }
</script>

<style scoped>
    .options-wrapper {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .right-option > Button {
        margin-left: 20px;
    }

    .search {
        display: flex;
    }

    .search > div {
        margin-right: 20px;
    }

</style>
